<template>
  <div class="app-container">
    <h1>App 根组件</h1>
    <hr />
    <Article>
      <template #title>
        <h3>一首诗</h3>
      </template>

<!--      <template #content="scope">-->
      <template #content="{msg,user}">
        <div>
          <p>关关雎鸠，在河之洲。窈窕淑女，君子好逑。</p>
          <p>参差荇菜，左右流之。窈窕淑女，寤寐求之。</p>
          <p>求之不得，寤寐思服。悠哉悠哉，辗转反侧。</p>
          <p>参差荇菜，左右采之。窈窕淑女，琴瑟友之。</p>
          <p>参差荇菜，左右芼之。窈窕淑女，钟鼓乐之。</p>
          <p>{{msg}}</p>
          <p>{{user.name}}</p>

        </div>
      </template>

      <template #author>
        <h3>作者: 诗经</h3>
      </template>
    </Article>
    <hr />

    <div class="box" style="display: none">
      <!-- 渲染 Left 组件和 Right 组件 -->
      <Left>
        <!--默认情况下,在使用组件的时候,提供的内容都会被填充到名字为 default 的插槽之中-->
        <!--1.如果要把内容填充到指定名称的插槽中,需要使用 v-slot: 这个指令-->
        <!--2.v-slot: 后面要跟上插槽的名字-->
        <!--3.v-slot: 指令不能直接用在元素身上,必须用在 template 标签上-->
        <!--4.template 这个标签,它是一个虚拟的标签,只起到包裹性质的作用,但不会被渲染为任何实质性的 html 元素-->
        <!--5.v-slot: 指令简写形式 #-->
        <template #default>
          <p>这是在 Left 组件中的 p 标签</p>
        </template>
      </Left>

    </div>
  </div>
</template>

<script>
import Left from "@/components/Left";
import Right from "@/components/Right";
import Article from "@/components/Article";

export default {
  components:{
    Left,
    Right,
    Article,
  }
}
</script>

<style lang="less">
.app-container {
  padding: 1px 20px 20px;
  background-color: #efefef;
}
.box {
  display: flex;
}
</style>
